<template>
  <div>
    <NewCard :isright="true" :title="title">
      <template #right>
        <span
          @click="selectAgreement(1)"
          class="Agreementbtn"
          :class="{ active: active == 1 }"
        >
          平台协议
        </span>
        <span
          :class="{ active: active == 2 }"
          @click="selectAgreement(2)"
          class="Agreementbtn"
        >
          项目协议
        </span>
      </template>
      <div class="left" :style="{ width: width }">
        <el-menu
          v-show="currentType == 1"
          :default-active="activeIndex"
          class="el-menu-demo"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="(item, index) in sidebarArr"
            :key="item.value"
            :index="index.toString()"
            @click.self="selectActive(item, $event)"
          >
            <div>
              <p v-if="inputIndex !== index" @dblclick="dbinputShow(index)">
                {{ item.title }}
              </p>
              <el-input
                autofocus
                v-model="item.title"
                v-else
                @blur="blurDbInput(item)"
                @keyup.enter.native="blurDbInput(item)"
              ></el-input>
            </div>
          </el-menu-item>
          <div class="bottom-item" v-hasPermi="['doc:richText:add']">
            <ComAddButton
              :isUpload="false"
              v-show="currentType == 1"
              @Event-blurInput="blurInput"
              label="添加协议"
            ></ComAddButton>
          </div>
        </el-menu>

        <el-tree
          v-show="currentType != 1"
          :data="typeList"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
        >
          <span slot-scope="{ node, data }">
            <span class="tree-add" :class="data.children ? '' : 'is-leaf'"
              ><svg-icon icon-class="add-icon"
            /></span>
            <span class="tree-minus" :class="data.children ? '' : 'is-leaf'"
              ><svg-icon icon-class="minus-icon"
            /></span>
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </NewCard>
  </div>
</template>

<script>
import { getProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";
import NewCard from "@/wss/components/newCard.vue";
import ComAddButton from "./ComAddButton.vue";
import { getRichTextlistTitleApi } from "@/wss/newApi_3-24/doc/richText.js";
const arr = ["", undefined, null];

export default {
  components: { NewCard, ComAddButton },

  props: {
    title: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "100%",
    },
    sidebarArr: {
      type: Array,
      default: () => [],
    },
    // 默认展示哪一项
    activeIndex: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      // 当前高亮的协议
      active: 1,
      typeList: [],

      defaultProps: {
        children: "children",
        label: "name",
      },
      // 是普通还是项目
      currentType: "1",
      inputOrPShow: true, //输入框和p显示隐藏
      inputIndex: "", //当前双击的index
    };
  },
  created() {
    this.getProjectTypelistFn();
  },
  methods: {
    // 获取项目类别
    async getProjectTypelistFn() {
      let { code, rows } = await getProjectTypelistApi();
      if (code != 200) return;
      this.typeList = JSON.parse(JSON.stringify(rows));
      // console.log(res, "困死我了");
    },
    // 获取项目协议
    async getRichTextListFn(id, editFormData) {
      const _this = this;

      let {
        code,
        data: { rows },
      } = await getRichTextlistTitleApi({ typeId: id });

      if (code != 200) return;
      _this.agreementArr = JSON.parse(JSON.stringify(rows));
      this.$emit("returnContent", rows, editFormData);
    },
    // 获取树形结构点击
    handleNodeClick(row) {
      // console.log(row);
      const editFormData = JSON.parse(JSON.stringify(row));

      this.getRichTextListFn(row.id, editFormData);
      // this.editFormData = editFormData;
      // if (editFormData.type == 2) {
      //   this.editFirstLevel = editFormData.pid;
      // }
      // if (editFormData.type == 2) {
      //   this.uploadTitile = "二级分类图标";
      // } else {
      //   this.uploadTitile = "三级分类图标";
      // }
      // if (editFormData.type == 3) {
      //   // console.log(row.id, "66");
      //   let secondItem = this.digui(this.typeList, row.pid);
      //   // 获取二级数组
      //   this.EditTwoChidren = this.typeList.find(
      //     (sItem) => sItem.id == secondItem.pid
      //   )?.children;
      //   this.editSecondLevel = row.pid;
      // }
    },
    // 选择协议 1是普通协议 2是项目协议
    selectAgreement(type) {
      this.active = type;
      this.$emit("EventSelectAgreement", type);
      this.currentType = type;
    },
    async blurInput(val) {
      console.log(val,'----------xxxxxx-------------xxxxxxxxxx');
      if(val.name == '用户协议' || val.name == '隐私协议'){
        this.$message({type: "warning",message: "用户协议和隐私协议不能添加！",});
        return
      }else{
        this.$emit("Event-blurInput", val);
      }
    },
    handleSelect() {},
    test() {
      console.log("搞定了");
    },
    selectActive(item, e) {
      console.log("12", e);
      if (this.inputIndex === "") {
        this.$emit("EventSelectSbider", item);
      }
    },

    dbinputShow(index) {
      this.inputOrPShow = !this.inputOrPShow;
      this.inputIndex = index;
    },

    blurDbInput(item) {
      if (arr.includes(item.title)) {
        this.$message({
          type: "warning",
          message: "协议名不可为空",
        });
        return;
      }

      this.inputIndex = "";
      this.$emit("changeTitile", item);
    },
  },
};
</script>

<style lang="scss" scoped>
$height: 100%;
.left {
  // position: relative;
  // border-radius: $border-radius;
  // height: $height;
  // padding-right: 0px;
  .bottom-item {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
  }
  ::v-deep .el-card__body {
    // padding-right: 0px;
    height: $height;

    .scroll {
      overflow-y: scroll;
      height: 100%;

      margin-right: -25px;
    }
  }
  ::v-deep .el-menu {
    position: initial;
    border-right: unset;
    margin-bottom: 80px;
  }
  ::v-deep .el-menu-item:hover {
    background: unset;
  }

  ::v-deep .el-menu-item {
    padding: unset !important;
    height: 46px;
    line-height: 46px;
    padding: 0 30px !important;
    border-bottom: 1px solid #f5f5f5;
  }
  ::v-deep .el-menu-item:hover,
  ::v-deep .el-menu-item.is-active {
    background-color: #edf6ff;
    color: #f87a23;
  }
  ::v-deep .el-menu-item p {
    margin: 0;
  }
}

.Agreementbtn {
  cursor: pointer;
  width: 100px;
  height: 34px;
  background: #f0f2f5;
  border: 1px solid #f0f2f5;
  border-radius: 4px;

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2e3f5e;
  line-height: 34px;
  text-align: center;
}
.active {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #f87a23;
  background: #ffffff;
  border: 1px solid #f0f2f5;
}
::v-deep .el-tree {
  padding: 0 30px;
  /* height: 100%; */
  // padding-top: 20px;
  // margin-bottom: 60px;
  /* overflow: scroll; */
}

::v-deep .el-tree::-webkit-scrollbar {
  width: 0px;
}
::v-deep .el-tree .is-expanded {
  position: relative;
}
::v-deep .el-tree .is-expanded::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
::v-deep .el-tree .tree-add,
::v-deep .el-tree .tree-minus {
  position: relative;
  margin-right: 7px;
  background-color: #fff;
  z-index: 1;
}
::v-deep .el-tree .el-tree-node__children .tree-add.is-leaf,
::v-deep .el-tree .el-tree-node__children .tree-minus.is-leaf {
  opacity: 0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-add,
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-minus {
  opacity: 0;
  margin-right: 0;
}
::v-deep
  .el-tree
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content {
  padding-left: 43px !important;
}
::v-deep .el-tree .tree-minus {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-add {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-minus {
  display: inline-block;
}

::v-deep .el-tree .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0;
}
::v-deep .el-tree .is-expanded .is-expanded::before {
  left: 25px;
}
::v-deep .el-tree .el-tree-node__content {
  height: 46px;
}
::v-deep .el-tree .el-icon-caret-right:before {
  display: none;
}
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
::v-deep .el-tree .el-icon-caret-right.is-leaf {
  opacity: 0;
}
::v-deep .el-menu-demo {
  width: 100%;
}

@media (max-width: 1180px) {
  .Agreementbtn{
    width: 75px;
    height: 30px;
    line-height: 30px;
  }
}

@media (max-width: 1120px) {
  .Agreementbtn{
    width: 62px;
  }
}
</style>